<!doctype html>
<html>		
		<head>
			<meta charset="utf-8">
			<script src="js/angular.min.js"></script>
		</head>
		<body ng-app="MyModule">
			<div>
				<div ng-controller="GreetCtrl">
					Hello, {{name}}
				</div>
				<div ng-controller="ListCtrl">
					<ol>
						<lis></lis>
					</ol>
				</div>
			</div>
			<div ng-controller="EventController">
			Root Scope
			<tt>MyEvent:</tt> count {{count}}
			<li ng-controller="EventController" ng-repeat="i in [1]">
				<button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
				<button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
				<button ng-click="click11(3)">click11</button>
				<br>
				Middle Scope
				<tt>MyEvent</tt> count {{count}}
				<ul>
					<li ng-repeat="item in [1,2]" ng-controller="EventController">
						Leaf scope
						<tt>MyEvent</tt>  count {{count}}
					</li>
				</ul>
			</li>
			</div>
		</body>



		<script type="text/javascript">
		var myModule = angular.module("MyModule",[]);
		myModule.directive("lis", function () {
			return {
				restrict: 'E',
				template: '<li ng-repeat="item in names">{{item.name}} is a {{item.sex}} in {{department}}</li>',
				replace: true
			}
		}); 

		function GreetCtrl($scope) {
			$scope.name = "World";
		}

		function ListCtrl($scope, $rootScope) {
			$scope.names = [{name:'Gadas',sex:'男'}, {name:'gsgs',sex:'男'},{name:'Ugdg',sex:'女'}];
			$rootScope.department = 'HHH';
		}

		function EventController($scope) {
			$scope.count = 0;
			$scope.$on('MyEvent',function () {
				$scope.count++;
			});
			$scope.click11=function (num) {
				alert(num * 10);
			};
		}
		</script>
</html>
